.pure-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--pure-overlay-background, var(--pure-background-mask));
    flex-direction: column;
    align-items: var(--pure-overlay-align-items, center);
    justify-content: var(--pure-overlay-justify-content, center);
    transition-property: all;
    transition-duration: var(--pure-overlay-transition-duration, 0.3s);
    transition-timing-function: var(--pure-overlay-transition-timing-function, ease);
    z-index: var(--pure-overlay-z-index, var(--pure-z-index-upper));
    display: none;
    overflow: var(--pure-overlay-overflow, hidden);
    margin: 0;
    padding: var(--window-top) 0 var(--window-bottom) 0;
    box-sizing: border-box;
}

.pure-overlay-before-hide {
    opacity: 1;
    display: flex;
}

.pure-overlay-to-hide {
    opacity: 0;
    display: flex;
}

.pure-overlay-hide {
    opacity: 0;
    display: none;
}

.pure-overlay-before-show {
    opacity: 0;
    display: flex;
}

.pure-overlay-to-show {
    opacity: 1;
    display: flex;
}

.pure-overlay-show {
    opacity: 1;
    display: flex;
}